<template>
	<view class="order-list">

		<view class='list-box' :style="'height:'+( windowHeight)  + 'px'">
			<scroll-view
				:style="(currentStatus=='1' ||currentStatus=='3'||currentStatus=='4')?'height: '+(windowHeight-110) + 'px;':'height: '+(windowHeight - 20) + 'px;'"
				scroll-y="true" class="scroll-Y">
				<view style=" height: 100%;">
					<view class="list-item">
						<block v-for="(item1, index1) in data.pfMallOrderProductsItemList" :key="index1">
							<view class="list-cell">
								<image class="img" mode="aspectFill"
									:src="item1.imgUrl||'https://dnsverify.pfmoto.com/appstatic/img/my/appoint_img_small.png'" />
								<view class="list-content_text" style="width: 426rpx;">
									<view class="layout-1" style="justify-content: space-between;">
										<text class="text-5"
											style="width: 300rpx;text-align: left;">{{item1.productName}}</text>
										<text class="text-5">X{{item1.count}}</text>
									</view>
									<view class="layout-1" style="margin-top: 4px;">
										<text class="text-1">{{item1.attValues}}</text>
									</view>
									<view class="layout-1" style="margin-top: 4px;justify-content:flex-end;">
										<text class="text-3" style="margin-top: 4px;"
											v-if="item1.payType=='3'">￥{{item1.mixturePrice}}+{{item1.mixturePoint}}分</text>
										<text class="text-3" style="margin-top: 4px;"
											v-else-if="item1.payType=='2'">{{item1.point}}分</text>
										<text class="text-3" style="margin-top: 4px;" v-else>￥{{item1.price}}</text>
									</view>


									<view class="layout-1" style="margin-top: 4px;justify-content:flex-end;">
										<text class="text-5" style='margin-right: 10px;'>实付</text>
										<text class="text-3" v-if="item1.payType=='1'">￥{{item1.finalPrice}}</text>
										<text class="text-3" v-else-if="item1.payType=='2'">{{item1.finalPoint}}分</text>
										<text class="text-3"
											v-else>￥{{item1.finalDiscountMixturePrice}}+{{item1.finalDiscountMixturePoint}}分</text>
									</view>
								</view>
							</view>


							<view class="layout-3" style="width: 622rpx;margin-top: 0rpx;"
								v-if="currentStatus!='1'&&currentStatus!='6'">
								<text class="text-orange" style="margin-right: 32rpx;"
									@click="addToCartOrBuy(item1)">加入购物车</text>


								<text class="text-tuikuan-3"
									v-if="(currentStatus==4||currentStatus==5)&&item1.commentFlag!='1'"
									style="margin-right: 32rpx;" @click="toEvaluate(item1)">评价</text>

								<text class="text-tuikuan-1" @click="orderRefundApplication(item1)"
									v-if='item1.cancelStatusText=="退款"'>退款</text>

								<text class="text-tuikuan-2" @click="cancelingOrder(item1)"
									v-else>{{item1.cancelStatusText}}</text>

							</view>
							<view class="layout-3" style="width: 622rpx;margin-top: 0rpx;" v-if="currentStatus=='6'">
								<text class="text-orange" @click="addToCartOrBuy(item1)">加入购物车</text>
							</view>

						</block>

						<view class="info-transverse">
							<view class="text-7">商品总价</view>
							<view class="text-8">￥{{data.orderAmount||0}}</view>
						</view>

						<view class="info-transverse">
							<view class="text-7">商品总积分</view>
							<view class="text-8">{{data.orderScore}}分</view>
						</view>

						<view class="info-transverse">
							<view class="text-7">运费</view>
							<view class="text-8">￥{{data.freightPrice||0}}</view>
						</view>
						<view class="info-transverse" v-if="data.couponName">
							<view class="text-7">优惠券</view>
							<view class="text-8" style="width: 200px;text-align: end">{{data.couponName}}</view>
						</view>
						<view class="info-transverse" v-else>
							<view class="text-7">优惠券</view>
							<view class="text-8">无</view>
						</view>
						<view class="info-transverse" v-if="data.couponAmount">
							<view class="text-7">优惠金额</view>
							<view class="text-8">￥{{data.couponAmount}}</view>
						</view>
						<view class="info-transverse" v-if="1==2">
							<view class="text-7">派币</view>
							<view class="text-8">无</view>
						</view>


						<view class="info-transverse" v-if="currentStatus==1||currentStatus==6">
							<view class="text-7">待支付</view>


							<text class="text-8" v-if="data.orderScore!=0&&data.orderScore!='0'&&data.orderScore!=null"
								style="color: #EA5404;">￥{{ Number(Number(data.orderAmount||0)*100   + Number(data.freightPrice||0)*100  - Number(data.couponAmount)*100)/100 }}+{{data.orderScore||0}}分</text>

							<text class="text-8" v-else
								style="color: #EA5404;">￥{{ Number(Number(data.orderAmount||0)*100   + Number(data.freightPrice||0)*100  - Number(data.couponAmount)*100)/100 }}</text>
						</view>

						<view class="info-transverse" v-else>
							<view class="text-7">实付</view>
							<text class="text-8" v-if="data.finalScore!=0&&data.finalScore!='0'&&data.finalScore!=null"
								style="color: #EA5404;">￥{{data.finalAmount||0}}+{{data.finalScore||0}}分</text>
							<text class="text-8" v-else style="color: #EA5404;">￥{{data.finalAmount||0}}</text>
						</view>


					</view>

					<view class="list-item" style="margin-top: 28rpx;">


						<view class="info-transverse-more">
							<view class="text-7">收货信息</view>

							<view class="info-more-view">
								<view class="text-8">{{data.pfMallAddress.consigneeName}}
									{{data.pfMallAddress.consigneePhone}}
								</view>
								<view class="text-8">{{data.pfMallAddress.consigneeAddress}}</view>
							</view>
						</view>
						<view class="info-transverse-more">
							<view class="text-7">备注</view>
							<view class="info-more-view">
								<view class="text-8">{{data.remark}}</view>
							</view>
						</view>
						<view class="info-transverse">
							<view class="text-7">订单编号</view>
							<view class='copyView'>
								<view class="text-8">{{data.orderNo}}</view>
								<view class='orderline'></view>
								<view class='copyView'>
									<image class="copyImage" @click='copy(data.orderNo)' mode='widthFix'
										src='https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/copy-icon.png' />
								</view>
							</view>
						</view>
						<view class="info-transverse">
							<view class="text-7">创建时间</view>
							<view class="text-8">{{data.createTime}}</view>
						</view>
						<block v-if="currentStatus==6">
							<view class="info-transverse">
								<view class="text-7">取消时间</view>
								<view class="text-8">{{data.orderCancelTime}}</view>
							</view>
							<view class="info-transverse">
								<view class="text-7">取消原因</view>
								<view class="text-8">{{orderCancelRemarkText}}</view>
							</view>
						</block>

						<block v-if="currentStatus!=1&&currentStatus!=6">
							<view class="info-transverse" v-if="showPaymentView==true">
								<view class="text-7">支付方式</view>
								<view class="text-8" v-if='data.paymentFlag==1'>支付宝</view>
								<view class="text-8" v-else-if='data.paymentFlag==2'>微信</view>
							</view>
							<view class="info-transverse">
								<view class="text-7">交易流水号</view>
								<view class="text-8">{{data.transactionId}}</view>
							</view>
							<view class="info-transverse">
								<view class="text-7">支付时间</view>
								<view class="text-8">{{data.paymentTime}}</view>
							</view>
						</block>

						<view class="info-transverse" v-if="currentStatus!=1&&currentStatus!=2&&currentStatus!=6">
							<view class="text-7">发货时间</view>
							<view class="text-8">{{data.freightTime}}</view>
						</view>

						<view class="info-transverse" v-if="currentStatus==4||currentStatus==5">
							<view class="text-7">确认收货时间</view>
							<view class="text-8">{{data.confirmReceiptTime}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 待支付 -->
			<view class="cancelBtns" v-if="currentStatus=='1'">
				<view class="layout-3" style='justify-content: space-between ;'>
					<view class="layout-4">
						<u-count-down :time="diff" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
							<view class="c-title warn">
								<text class="text-3" style='font-weight: 400;'
									v-if="timeData.minutes>9">{{ timeData.minutes }} </text>
								<text class="text-3" style='font-weight: 400;' v-else>0{{ timeData.minutes }}
								</text>
								<text class="text-3"
									style='font-weight: 400;margin-left: 8rpx;margin-right: 8rpx;'>:</text>
								<text class="text-3" style='font-weight: 400;'
									v-if="timeData.seconds>9">{{ timeData.seconds }}</text>
								<text class="text-3" style='font-weight: 400;' v-else>0{{ timeData.seconds }}</text>
							</view>
						</u-count-down>
						<text class="text-9">后自动取消</text>
					</view>
					<view class="layout-5">
						<text class="text-cancel" @click="cancelOrderOrRefund">取消订单</text>
						<text class="text-evaluate" @click="toPay" style="margin-left: 20px;">立即支付</text>
					</view>
				</view>
			</view>
			<!-- 待收货 -->
			<view class="cancelBtns" v-else-if="currentStatus=='3'">
				<view class="layout-3" style='justify-content: space-between;'>
					<text class="text-black" style='width: 333rpx;' @click="viewLogistics">查看物流</text>
					<text class="text-evaluate" style="width: 333rpx;margin-left: 20px;"
						@click="confirmReceipt">确认收货</text>
				</view>
			</view>
			<!-- 已收货/待评价 -->
			<view class="cancelBtns" v-else-if="currentStatus=='4'">
				<text class="cancelblackBtn" @click="viewLogistics">查看物流</text>
			</view>

		</view>
	</view>
</template>
<script>
	const app = getApp();
	const util = require('@/utils/util.js');
	const network = require('@/manager/network-manager.js');
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				windowHeight: app.globalData.windowHeight - app.globalData.navigationBarHeight,
				navigationBarHeight: app.globalData.navigationBarHeight,
				contentHeight: app.globalData.windowHeight - 100,
				currentStatus: null, //1 待支付 2 待发货 3 待收货 4 待评价
				// 订单最新状态;1待支付、2已支付/待发货、 3,待收货 4,已收货/待评价、5已评价/交易完成、6已取消
				orderNo: '',
				data: {
					"id": null,
					"orderNo": null,
					"orderScore": null,
					"orderAmount": null,
					"signTime": null,
					"freightTime": null,
					"freightNo": null,
					"freightPrice": null,
					"transactionId": null,
					"expireTime": null,
					"paymentTime": null,
					"paymentFlag": null,
					"orderNewFlag": null,
					"createTime": null,
					"consigneePhone": null,
					"consigneeName": null,
					"consigneeAddress": null,
					"remark": null,
					"pfMallAddress": {
						"id": null,
						"orderId": null,
						"consigneeName": null,
						"consigneePhone": null,
						"consigneeAddress": null,
					},
					"pfMallOrderProductsItemList": [{
						"id": null,
						"itemId": null,
						"productId": null,
						"goodsType": null,
						"count": null,
						"orderNo": null,
						"orderId": null,
						"discountMixturePrice": null,
						"discountMixturePoint": null,
						"finalDiscountMixturePrice": null,
						"finalDiscountMixturePoint": null,
						"finalPoint": null,
						"finalPrice": null,
						"point": null,
						"price": null,
						"mixturePrice": null,
						"mixturePoint": null,
						"payType": null,
						"attName": null,
						"attValues": null,
						"productName": null,
						"imgUrl": null,
						"cancelStatusText": null,
						"commentFlag": null,
						"freightPrice": null,
					}]
				},
				expireTime: '',
				nowTime: '',
				diff: 0,
				timeData: {},
				showPaymentView: true,
				orderCancelRemarkText: ''

			}
		},
		onLoad: function(options) {
			this.orderNo = options.orderNo

			//更新已读
			if ((options.from1 == "message" || options.from1 == "notice") && options.myId) {
				this.update2Read(options.myId, options.from1);
			}
		},
		onShow() {
			this.getProductOrderDetailsByOrderNo()
		},
		methods: {
			//更新已读
			update2Read: function(myId, from1) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_UPDATE_LEVCMSGUSERREADY;
				var params = {
					"id": myId,
					"isType": 2
				};
				network.post(uri, params, 'json').then(res => {
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						if (from1 == 'message') {
							//回调上一个页面
							let pages = getCurrentPages();
							if (pages.length == 3) {
								let prePage = pages[pages.length - 2];
								let preprePage = pages[pages.length - 3]
								// #ifdef H5
								prePage.refresh(myId);
								preprePage.refresh();
								// #endif
								// #ifdef APP-PLUS
								prePage.$vm.refresh(myId);
								preprePage.$vm.refresh();
								// #endif
							}
						} else {
							let pages = getCurrentPages();
							let prePage = pages[pages.length - 2];
							// #ifdef H5
							prePage.refresh(myId);
							// #endif
							// #ifdef APP-PLUS
							prePage.$vm.refresh(myId);
							// #endif
						}

						util.syncBadge(getApp())
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			//根据订单编号查询商城订单详情
			getProductOrderDetailsByOrderNo: function() {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_PRODUCT_PFMALLORDER_GETPRODUCTORDERDETAILSBYORDERNO; //刷新页面配置
				var params = {
					"orderNo": that.orderNo
				};
				network.get(uri, params, 'form', null, true).then(res => {
					if (res.code == 200) {
						that.data = res.data
						this.expireTime = res.data.expireTime
						this.getBeiJingTime()
						if (parseFloat(that.data.orderAmount) + parseFloat(that.data.freightPrice) <= 0) {
							that.showPaymentView = false
						}
						for (var i = 0; i < that.data.pfMallOrderProductsItemList.length; i++) {
							// 订单最新状态;1待支付、2已支付/待发货、 3,待收货 4,已收货/待评价、5已评价/交易完成、6已取消
							that.currentStatus = that.data.orderNewFlag
							if (that.currentStatus == 6) {
								that.getCancelReasonList()
							}
							// that.currentStatus = 4
						}
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});
			},
			//取消原因
			getCancelReasonList: function() {
				var that = this
				var url = app.globalData.config.interfaces.URL_DICTIONARY_GETDICTIONARYLIST
				var params = {
					dictionaryCode: 'MALL_ORDER_CANCEL_REASON'
				};
				network.get(url, params, 'json').then(res => {
					if (res.code == 200) {
						var cancelResonList = res.data
						for (var i = 0; i < cancelResonList.length; i++) {
							if (that.data.orderCancelRemark == cancelResonList[i].contentCode) {
								that.orderCancelRemarkText = cancelResonList[i].contentName
							}
						}

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
				});

			},
			//加入购物车
			addToCartOrBuy: function(item) {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_ACTIVITY_PRODUCTCARS_ADDPRODUCTSCARS; ///levc-sys/sendMessage/updateLevcMessageUserReady
				var params = {
					itemId: item.itemId,
					num: item.count,
					productId: item.productId,
					productType: item.goodsType,
					payType: item.payType,
					userId: app.getUserId()
				};
				network.post(uri, params, 'json', null, true).then(res => {
					if (res.code == 200) {
						console.log("加入购物车", JSON.stringify(res));
						uni.showToast({
							title: '商品已添加到购物车',
							duration: 3000,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});

			},
			//获取当前时间
			getBeiJingTime: function() {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_SYS_API_GETBEIJINGTIME; ///levc-sys/sendMessage/updateLevcMessageUserReady
				var params = {};
				network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						that.nowTime = res.data
						that.diff = dayjs(that.expireTime).diff(dayjs(that.nowTime))
						//订单预期就取消订单
						if (that.diff < 0 && that.currentStatus == 1) {
							// that.cancelOrderIfExpire()
						}
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			//验证订单逾期后-取消订单
			cancelOrderIfExpire: function() {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_PRODUCT_PFMALLORDER_CANCELORDERIFEXPIRE; ///levc-sys/sendMessage/updateLevcMessageUserReady
				var params = {
					"id": that.data.id
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.getProductOrderDetailsByOrderNo()
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			//确认收货
			confirmReceipt: function() {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_PRODUCT_PFMALLORDER_CONFIRMRECEIPT; ///levc-sys/sendMessage/updateLevcMessageUserReady
				var params = {
					"id": that.data.id
				};
				network.get(uri, params, 'form', null, true).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
						that.getProductOrderDetailsByOrderNo()
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			// 时间改变
			onChange(e) {
				this.timeData = e
			},
			//取消订单(currentStatus=1-待支付=>取消订单   currentStatus=2-待支付=>退款)
			cancelOrderOrRefund: function() {
				uni.navigateTo({
					url: '/module_my/pages/mallDetail/mallCancelDetail?currentStatus=' + this.currentStatus +
						'&orderNo=' + this
						.orderNo
				})
			},
			//立即支付
			toPay: function() {
				var totalPrice = this.data.orderAmount || 0
				var totalPrcs = this.data.orderScore || 0

				var buyListJson = JSON.stringify(this.data.pfMallOrderProductsItemList)



				if (this.data.couponOn) {
					uni.navigateTo({
						url: '/module_mall/order/fillOrder?totalPrice=' + totalPrice + '&totalPrcs=' +
							totalPrcs + "&buyListJson=" + buyListJson + '&id=' + this.data.id +
							'&paymentFlag=' +
							this.data.paymentFlag + '&rermark=' + this.data.remark +
							'&couponName=' + this.data.couponName +
							'&couponAmount=' + this.data.couponAmount +
							'&couponNo=' + this.data.couponOn +
							'&from=order'
					})
				} else {
					uni.navigateTo({
						url: '/module_mall/order/fillOrder?totalPrice=' + totalPrice + '&totalPrcs=' +
							totalPrcs + "&buyListJson=" + buyListJson + '&id=' + this.data.id +
							'&paymentFlag=' +
							this.data.paymentFlag + '&rermark=' + this.data.remark +
							'&from=order'
					})
				}




			},
			//一件一件商品退款
			orderRefundApplication: function(item) {
				var pfMallOrderProductsItemList = []
				pfMallOrderProductsItemList.push(item)
				var pfMallOrderProductsItemListJson = JSON.stringify(pfMallOrderProductsItemList)
				uni.navigateTo({
					url: '/module_my/pages/mallDetail/mallCancelDetail?currentStatus=' + this.currentStatus +
						'&orderNo=' + this
						.orderNo + '&pfMallOrderProductsItemListJson=' + pfMallOrderProductsItemListJson
				})
			},
			//评价
			toEvaluate: function(item) {
				var pfMallOrderProductsItemList = []
				pfMallOrderProductsItemList.push(item)
				var pfMallOrderProductsItemListJson = JSON.stringify(pfMallOrderProductsItemList)
				uni.navigateTo({
					url: '/module_my/pages/mallDetail/mallEvaluateDetail?pfMallOrderProductsItemListJson=' +
						pfMallOrderProductsItemListJson
				})
			},
			//退款中
			cancelingOrder: function(item) {
				uni.navigateTo({
					url: '/module_my/pages/mallDetail/mallRefundDetail?itemId=' + item.id
				})
			},
			//复制单号
			copy: function(orderId) {
				uni.setClipboardData({
					data: orderId
				})
			},
			//查看物流
			viewLogistics: function() {
				var addressInfo = this.data.pfMallAddress
				uni.navigateTo({
					url: '/module_my/pages/mallDetail/viewLogistics?orderNo=' + this.data.orderNo +
						'&consigneePhone=' + addressInfo.consigneePhone + '&consigneeName=' + addressInfo
						.consigneeName + '&consigneeAddress=' + addressInfo.consigneeAddress + '&freightNo=' +
						this.data.freightNo + '&confirmReceiptId=' + this.data.id + '&currentStatus=' + this
						.currentStatus
				})
			},


		}
	}
</script>
<style>
	@import "./mallDetail.css";

	.empty {
		height: 100%;
		width: 100%;

	}

	.empty .img-box {
		width: 388rpx;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.empty .img-box image {
		width: 100%;
	}

	.empty .text {
		text-align: center;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #ADB0AE;
	}

	.u-nav-slot {
		display: flex;
		flex-direction: row;
	}
</style>
